<template>
<div 
    class="novak-cp-container"
    v-show="dataList.length>0">
    <div class="top-container">
        产出层位判识
    </div>
    <div class="list-container">
        <div 
            class="item"
            v-for="(item,index) in contrastDataList"
            :key="index">
            <div class="top-container">
                <div style="padding: 15px 0 0 15px;">
                    <div class="title">基础报告</div> <br>
                    地区：{{dataList[index].area}} <br><br>
                    层位：{{dataList[index].horizon}} <br><br>
                    实验中心编号：{{dataList[index].conentid}}<br><br>
                    报告编号：{{dataList[index].testNo}}<br>
                </div>
                <NovakChartInfo
                    class="chart-info"
                    :pointData="toNovakList(item)"
                    :padding="[40,60,50,60]">
                </NovakChartInfo>
            </div>
            <div class="top-container">
                <div style="padding: 15px 0 0 15px;">
                    <div class="title">当前报告</div> <br>
                    地区：{{item.area}} <br><br>
                    层位：{{item.horizon}} <br><br>
                    实验中心编号：{{item.conentid}}<br><br>
                    报告编号：{{item.testNo}}<br><br>
                    相似度：<span>{{((item.similarity || 0)*100).toFixed(4)}}%</span>
                </div>
                <NovakChartInfo
                    class="chart-info"
                    :pointData="toNovakList(dataList[index])"
                    :padding="[40,60,50,60]">
                </NovakChartInfo>
            </div>
            <!-- <div class="item-title" v-if="dataList[index]">
                <div style="padding: 15px 0 0 15px;">
                    基础报告 <br>
                    地区：{{dataList[index].area}} <br>
                    层位：{{dataList[index].horizon}} <br>
                    实验中心编号：{{dataList[index].conentid}}<br>
                    报告编号：{{dataList[index].testNo}}<br>
                </div>
                <div style="padding: 15px 0 0 15px;">
                    当前报告 <br>
                    地区：{{item.area}} <br>
                    层位：{{item.horizon}} <br>
                    实验中心编号：{{item.conentid}}<br>
                    报告编号：{{item.testNo}}<br>
                    相似度：<span>{{((item.similarity || 0)*100).toFixed(4)}}%</span>
                </div>
            </div>
            <div class="item-container">
                <NovakChartInfo
                    class="chart-info"
                    :pointData="toNovakList(item)"
                    :padding="[40,60,50,60]">
                </NovakChartInfo>
                <NovakChartInfo
                    class="chart-info"
                    :pointData="toNovakList(dataList[index])"
                    :padding="[40,60,50,60]">
                </NovakChartInfo>
            </div> -->
        </div>
    </div>
    <!-- <div class="top">
        <div class="left">
            <div class="title">
                产出层位判识 最相似数据
            </div>
            <div class="container">
                <div 
                    class="item"
                    v-for="(item,index) in contrastDataList"
                    :key="index">
                    <div class="item-title" v-if="dataList[index]">
                        {{dataList[index].area+'-'}}{{dataList[index].horizon}}（{{dataList[index].conentid}}|{{dataList[index].testNo}}）
                        <span>和</span>
                        {{item.area+'-'}}{{item.horizon}}{{item.conentid}}|{{item.testNo}}
                        相似度
                        <span>{{((item.similarity || 0)*100).toFixed(4)}}%</span>
                    </div>
                    <NovakChartInfo
                        class="chart-info"
                        :pointData="toNovakList(item)">
                    </NovakChartInfo>
                </div>
            </div>
        </div>
        <div class="right">
            <div class="title">
                当前报告
            </div>
            <div class="container">
                <div 
                    class="item"
                    v-for="(item,index) in dataList"
                    :key="index">
                    <div class="item-title">
                        {{item.area+'-'}}{{item.horizon+'-'}}{{item.testTitle}}
                        （{{item.conentid}}|{{item.testNo}}）
                    </div>
                    <NovakChartInfo
                        class="chart-info"
                        :pointData="toNovakList(item)">
                    </NovakChartInfo>
                </div>
            </div>
        </div>
    </div> -->
</div>
</template>
<script>
/**
 * 产出层位判识
 */
import NovakChartInfo from '@/components/novak/NovakChartInfo2';
import {isEmptyObject} from '@/common/OtherTools';
export default {
    components:{NovakChartInfo},
    props:{
        currentReport:{  //当前选择的报告
            type:Object,
            default:()=>{
                return {};
            },
        },
        reports:{  //当前选择的报告列表
            type:Array,
            default:()=>[],
        },
        areas:{  //当前选择的井号
            type:Array,
            default:()=>[],
        },
        horizons:{  //当前选择的层位
            type:Array,
            default:()=>[],
        },
        fontColor:{
            type:String,
            default:'',
        },
        borderColor:{
            type:String,
            default:'',
        },
        chartBorderColor:{
            type:String,
            default:'',
        },
    },
    data() {
        return {
            contrastData:{},
            dataList:[],  //数据列表
            contrastDataList:[],  //对比数据列表
        };
    },
    watch:{
        reports:{
            handler(){
                this.$nextTick(()=>{
                    this.getReportData();
                });
            },
            immediate:true,
        },
    },
    methods:{
        isEmptyObject,
        getReportData(){  //获取报告数据
            if(this.reports.length == 0){
                this.dataList = [];
                this.contrastDataList = [];
                return;
            }
            this.$Service.post(
                this.$Api.productHorizon,
                {
                    'area':this.areas.join(','),
                    'horizon':this.horizons.join(','),
                    "reportNo":this.reports.map(item=>item.reportNo).join(","),
                },
            ).then(res => {
                this.dataList = [];
                this.contrastDataList = [];
                let list = res.data || [];
                list.forEach(item => {
                    this.dataList.push(item.thisnovak);
                    this.contrastDataList.push(item.mostnovak);
                });
                this.$forceUpdate();
            }).catch(() => {
                this.dataList = [];
                this.contrastDataList = [];
            });
        },
        toNovakList(novak){  //将对象转成list
            if(!novak) return [];
            return [novak.ca_mg,novak.na_ca,novak.na_k_ca_mg,novak.na_k,novak.mg_k,novak.na_mg];
        },
    },
};
</script>
<style scoped lang="scss">
.novak-cp-container{
    width: 100%;
    height: fit-content;
    text-align: left;
    color: var(--font-color);
    border: 1px solid var(--border-color);
    box-sizing: border-box;
    background: linear-gradient(180deg, #031F37 0%, #03316C 100%);
    box-shadow: inset 0px 0px 15px #1b60cc;
    >.top-container{
        font-size: 1.5rem;
        font-weight: bold;
        padding: 1rem;
        box-sizing: border-box;
        line-height: 1;
        border-bottom:1px solid var(--border-color) ;
    }
    >.list-container{
        width: 100%;
        max-height: 40rem;
        overflow: auto;
        padding: 5px;
        box-sizing: border-box;
        display: grid;
        grid-gap: 5px;
        // grid-template-columns: repeat(auto-fill,minmax(700px,1fr));
        >.item{
            background-color: #0000005f;
            border-radius: 5px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-gap: 15px;
            >.top-container{
                display: grid;
                grid-template-columns: 1fr 1.2fr;
                grid-gap: 5px;
                >.chart-info{
                    height: 300px;
                }
                >div{
                    font-size: 17px;
                    padding: 5px;
                    box-sizing: border-box;
                    border-bottom: 1px solid #00000051;
                    >span{
                        color: #00a984;
                        font-weight: bold;
                    }
                }
                .title{
                    padding: 5px;
                    text-align: center;
                    background: linear-gradient(180deg, #031F37 0%, #03316C 100%);
                }
            }
            >.item-title{
                display: grid;
                grid-template-columns: 1fr 1fr;
                grid-gap: 5px;
                >div{
                    font-size: 17px;
                    padding: 5px;
                    box-sizing: border-box;
                    border-bottom: 1px solid #00000051;
                    >span{
                        color: #00a984;
                        font-weight: bold;
                    }
                }
            }
            >.item-container{
                display: grid;
                grid-template-columns: 1fr 1fr;
                grid-gap: 0px;
                >.chart-info{
                    height: 300px;
                }
            }
        }
    }
}
</style>
